<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch和watchEffect使用与差异性</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        setup() {
            const {reactive, watch, toRefs} = Vue;
            const nameObj = reactive({name: 'dell',englishName:'lee'});
            /**
             * 具备一定的惰性 lazy
             * 参数可以拿到原始和当前值
             * 可以侦听多个数据的变化，用一个侦听器承载
             *  实现非惰性的话，可以配置第三个参数{immediate:true}
             */
            watch([() => nameObj.name,()=> nameObj.englishName], ([curName, curEng],[preName,preEng]) => {
                console.log(curName, curEng)
                console.log(preName, preEng)
            },{
                immediate:true
            })
            const {name,englishName} = toRefs(nameObj)
            return {name,englishName}
        },
        template: `
          <div>
          <div>
            Name: <input v-model="name">
          </div>
          <div>
            Name is {{ name }}
          </div>

          <div>
            englishName: <input v-model="englishName">
          </div>
          <div>
            englishName is {{ englishName }}
          </div>
          </div>
        `
    });
    const vm = app.mount("#app");
</script>
</body>
</html>